import React, { useState, useEffect } from 'react'
import { NavBar, SearchBar, Mask } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import './Search.css'

export default function Search() {
    const [flag, setflag] = useState(false)
    const [flag2, setflag2] = useState(true)
    const [SearchList, setSearchLise] = useState([])
    const [name, setname] = useState('')
    const [visible, setVisible] = useState(false)
    const [content, setcontent] = useState([])
    const navigate = useNavigate()
    const [arr, setarr] = useState([
        { id: 1, name: "昆曲", status: false },
        { id: 2, name: "京剧", status: false },
        { id: 3, name: "皮影戏", status: false },
        { id: 4, name: "越剧", status: false },
        { id: 5, name: "庙会", status: false },
        { id: 6, name: "剪纸", status: true },
        { id: 7, name: "蜡染", status: true },
        { id: 8, name: "花灯", status: true },
        { id: 9, name: "春节", status: true },
        { id: 10, name: "元宵节", status: true },
    ])

    const handlerChange = (e) => {
        setname(e)
    }

    const handlerBlur = async () => {
        await axios.post('http://localhost:3000/addSearch', { name })
        getSearch()
        getContent()
    }

    const getSearch = async () => {
        const res = await axios.get('http://localhost:3000/getSearch')
        setSearchLise(res.data.search)
    }

    const getContent = async () => {
        const res = await axios.get('http://localhost:3000/getContent')
        res.data.content.filter(item => {
            if (item.name === name) {
                navigate('/xiang', { state: item })
            }
        })
    }

    const handlerDel = async () => {
        await axios.post('http://localhost:3000/delSearch')
        getSearch()
        setVisible(false)
    }

    const handlerD = () => {
        setVisible(true)
    }

    const handlerQuxiao = () => {
        setVisible(false)
    }

    useEffect(() => {
        getSearch()
        getContent()
    }, [])

    const back = () => {
        navigate('/app/xun')
    }

    return (
        <div>
            <NavBar onBack={back}>
                <SearchBar placeholder='寻找你想了解的非遗文化' onChange={(value) => { handlerChange(value) }} onBlur={() => { handlerBlur() }} />
            </NavBar>
            <hr />
            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '40px' }}>
                <span style={{ fontSize: '17px', lineHeight: '40px' }}>最近搜索</span>
                <svg onClick={() => { handlerD() }} style={{ width: '22px', height: '22px', marginTop: '10px' }} t="1739778919997" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4220" width="200" height="200"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" fill="#ea9518" p-id="4221"></path></svg>
            </div>
            <div style={{ width: '100%', height: '200px', flexWrap: 'wrap', display: 'flex' }}>
                {SearchList.map(item => {
                    return <div key={item._id} style={{ width: '80px', height: '40px', marginLeft: '20px', border: '1px solid #eee', lineHeight: '50px', borderRadius: '20px', textAlign: 'center' }}>
                        <span>{item.name}</span>
                    </div>
                })}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '40px' }}>
                <span style={{ fontSize: '17px', lineHeight: '40px' }}>猜你想搜</span>
                <div>
                    <svg onClick={() => { setflag(!flag) }} style={{ width: '22px', height: '22px', marginTop: '10px', marginRight: '10px' }} t="1739779462805" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8009" width="200" height="200"><path d="M849.2 637.1c-12.7-5.8-27.7-0.1-33.5 12.6-54 118.9-173.2 195.7-303.7 195.7-160.5 0-294.8-114-326.4-265.3l56.1 56.1c4.9 4.9 11.4 7.4 17.9 7.4 6.5 0 13-2.5 17.9-7.4 9.9-9.9 9.9-25.9 0-35.8L171.2 494.1c-1.2-1.2-2.5-2.2-3.9-3.2-0.6-0.4-1.3-0.7-1.9-1.1-0.8-0.4-1.6-0.9-2.4-1.3-0.8-0.3-1.7-0.5-2.5-0.8-0.7-0.2-1.4-0.5-2.2-0.7-1.6-0.3-3.1-0.5-4.7-0.5h-0.2-0.2c-1.6 0-3.2 0.2-4.7 0.5-0.8 0.2-1.5 0.4-2.2 0.7-0.8 0.2-1.7 0.4-2.5 0.8-0.9 0.4-1.6 0.8-2.4 1.3-0.6 0.4-1.3 0.6-1.9 1.1-2.8 1.9-5.2 4.2-7 7-0.4 0.6-0.7 1.3-1 1.9-0.4 0.8-0.9 1.6-1.3 2.4-0.3 0.8-0.5 1.7-0.8 2.6-0.2 0.7-0.5 1.4-0.6 2.2-0.3 1.6-0.5 3.3-0.5 5 0 211.7 172.3 384 384 384 150.3 0 287.6-88.5 349.8-225.4 5.5-12.7-0.1-27.7-12.9-33.5zM880.4 535.4c0.8-0.4 1.6-0.8 2.4-1.3 0.6-0.4 1.3-0.6 1.9-1.1 2.8-1.9 5.2-4.2 7-7 0.4-0.6 0.7-1.3 1-1.9 0.4-0.8 0.9-1.6 1.3-2.4 0.3-0.8 0.5-1.7 0.8-2.6 0.2-0.7 0.5-1.4 0.6-2.2 0.3-1.6 0.5-3.3 0.5-5 0-211.7-172.3-384-384-384-152.1 0-290.1 89.9-351.5 229.1-5.6 12.8 0.1 27.7 12.9 33.4 12.8 5.7 27.7-0.2 33.4-12.9C260.1 256.7 379.9 178.6 512 178.6c160.5 0 294.8 114 326.4 265.3l-56.1-56.1c-9.9-9.9-25.9-9.9-35.8 0-9.9 9.9-9.9 25.9 0 35.8L852.9 530c1.2 1.2 2.5 2.2 3.9 3.2 0.6 0.4 1.3 0.7 1.9 1.1 0.8 0.4 1.6 0.9 2.4 1.3 0.8 0.3 1.7 0.5 2.5 0.8 0.7 0.2 1.4 0.5 2.2 0.6 1.6 0.3 3.3 0.5 5 0.5 1.7 0 3.3-0.2 5-0.5 0.8-0.1 1.5-0.4 2.2-0.6 0.7-0.5 1.5-0.7 2.4-1z" p-id="8010" fill="#ea9518"></path></svg>
                    <svg onClick={() => { setflag2(!flag2) }} style={{ width: '24px', height: '24px', marginTop: '10px', marginRight: '10px', display: flag2 ? 'none' : 'inline-block' }} t="1739779423349" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6104" width="200" height="200"><path d="M512 768c-183.466667 0-328.533333-85.333333-426.666667-256 98.133333-170.666667 243.2-256 426.666667-256s328.533333 85.333333 426.666667 256c-98.133333 170.666667-243.2 256-426.666667 256z m8.533333-426.666667c-128 0-256 55.466667-328.533333 170.666667 72.533333 115.2 200.533333 170.666667 328.533333 170.666667s238.933333-55.466667 311.466667-170.666667c-72.533333-115.2-183.466667-170.666667-311.466667-170.666667z m-8.533333 298.666667c-72.533333 0-128-55.466667-128-128s55.466667-128 128-128 128 55.466667 128 128-55.466667 128-128 128z m0-85.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667-42.666667 17.066667-42.666667 42.666667 17.066667 42.666667 42.666667 42.666667z" fill="#ea9518" p-id="6105"></path></svg>
                    <svg onClick={() => { setflag2(!flag2) }} style={{ width: '24px', height: '24px', marginTop: '10px', marginRight: '10px', display: flag2 ? 'inline-block' : 'none' }} t="1739782669071" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11886" width="200" height="200"><path d="M512 219.428571c161.645714 0 307.931429 97.499429 438.857143 292.571429-130.925714 195.072-277.211429 292.571429-438.857143 292.571429S204.068571 707.072 73.142857 512c130.925714-195.072 277.211429-292.571429 438.857143-292.571429z m0 73.142858c-124.123429 0-241.225143 65.462857-365.714286 219.428571 119.661714 147.968 231.424 213.577143 365.714286 219.428571 124.196571 0 241.298286-65.462857 365.714286-219.428571-119.588571-147.968-231.350857-213.577143-365.714286-219.428571z" fill="#ea9518" p-id="11887"></path><path d="M818.614857 146.285714l51.712 51.712L197.997714 870.4 146.285714 818.688z" fill="#ea9518" p-id="11888"></path><path d="M512 365.714286a146.285714 146.285714 0 1 1 0 292.571428 146.285714 146.285714 0 0 1 0-292.571428z m0 73.142857a73.142857 73.142857 0 1 0 0 146.285714 73.142857 73.142857 0 0 0 0-146.285714z" fill="#ea9518" p-id="11889"></path></svg>
                </div>
            </div>
            <div style={{ width: '100%', height: '200px', flexWrap: 'wrap', display: flag2 ? 'flex' : 'none' }}>
                {arr.map(item => {
                    return <div key={item.id} style={{ width: '80px', height: '40px', marginLeft: '20px', border: '1px solid #eee', lineHeight: '50px', borderRadius: '20px', textAlign: 'center', display: flag == item.status ? 'block' : 'none' }}>
                        <span>{item.name}</span>
                    </div>
                })}
            </div>
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className='overlayContent'>
                        <p style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '16px', marginTop: '30px' }}>温馨提示</p>
                        <p style={{ textAlign: 'center', marginTop: '20px' }}>确认清空最近搜索记录吗</p>
                        <div>
                            <button style={{ width: '150px', height: '40px', marginTop: '22px', borderRadius: '0px 0px 0px 10px', border: '0px',marginLeft:'20px' }} onClick={() => { handlerQuxiao() }}>取消</button>
                            <button style={{ width: '150px', height: '40px', marginTop: '22px', borderRadius: '0px 0px 10px 0px', border: '0px', backgroundColor: 'rgb(251, 229, 172)' }} onClick={() => { handlerDel() }}>确定</button>
                        </div>
                    </div>
                </Mask>
            </>
        </div>
    )
}